﻿$(document).ready(function () {
    $('.popup-button').click(function () {
        var popupUrl = $(this).data("popup-url");
        $.ajax({
            type: "GET",
            url: popupUrl,
            success: showResponse,
            dataType: "html"
        });
        // Getting popup container
        var loginBox = $("#popup-box");
        //Fade in the Popup and add close button
        $(loginBox).fadeIn(300);
        $(loginBox).css({
            'position': 'absolute',
            'top': '30%',
            'left': '40%'
        });
        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);
        return false;
    });

    // When clicking on the button close or the mask layer the popup closed
    $('a.close, #mask').live('click', function () {
        $('#mask , .popup').fadeOut(300, function () {
            $('#mask').remove();
        });
        return false;
    });

    $('#submitButton').live('click', function () {
        var submitUrl = $(this).data("popup-submit-url");
        var data = $("#PopupForm .post").serialize();
        $.ajax({
            type: "POST",
            url: submitUrl,
            data: data,
            success: showSubmitResponse,
        });
    });
    
    
    function showResponse(response) {
        $("#popup-box").html(response);
    }
    
    function showSubmitResponse(response) {
        $('#mask').remove();
        $('#popup-box').html('');
        $('#popup-box').hide();
        $('#updatedContainer').html(response);
    }
});